<!-- 歌曲列表组件 -->
<template>
  <div class="m-sglst">
    <div @click="playSong(item.id, item.song.fee)" class="m-sgitem" v-for="item in songList" :key="item.id">
      <div class="sgfr f-bd f-bd-btm">
        <div class="sgchfl">
          <div class="f-thide sgtl">
            {{ item.name }}
            <span style="color: #888; margin-left: 4px" v-if="item.song.alias[0]">({{ item.song.alias[0] }})</span>
          </div>
          <div class="f-thide sginfo">
            <i class="u-hmsprt sghot" v-if="item.song.sqMusic"></i>
            {{ item.song.artists[0].name }} - {{ item.song.album.name }}
          </div>
        </div>
        <div class="sgchfr">
          <span class="u-hmsprt sgchply"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="MusicList">
import { ref, onMounted } from "vue";
import { newMusicAPI } from '@/api'
import { playSong } from '@/utils/dedicated'

let songList = ref([]) // 最新音乐数据

onMounted(() => {
  newMusicAPI({ limit: 10 }).then((res) => {
    songList.value = res.data.result
  })
})

// 歌曲播放限制
//     playSong,
</script>

<style lang="scss" scoped>
.m-sglst {
  position: relative;

  .m-sgitem {
    display: flex;
    padding-left: 10px;

    .sgfr {
      flex: 1 1 auto;
      display: flex;
      position: relative;
    }

    .sgchfl {
      padding: 6px 0;
      width: 0;
      flex: 1 1 auto;

      .f-thide {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }
    }

    .sgchfr {
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    .f-bd-btm {
      border-bottom: 1px solid rgba(226, 226, 227);
    }

    .f-bd:after {
      position: absolute;
      z-index: 2;
      content: '';
      top: 0;
      left: 0;
      pointer-events: none;
      box-sizing: border-box;
      transform-origin: top left;
      border: 0 solid rgba(0, 0, 0, 0.1);
    }

    .sgtl {
      font-size: 17px;
      color: #333;
    }

    .sginfo {
      font-size: 12px;
      color: #888;
    }

    .sghot {
      display: inline-block;
      width: 12px;
      height: 8px;
      margin-right: 4px;
    }

    .sgchply {
      display: inline-block;
      width: 22px;
      height: 22px;
      background-position: -24px 0;
    }
  }

  .u-hmsprt {
    background: url('../assets/home/sq-bofang.png') no-repeat;
    background-size: 166px 97px;
  }
}
</style>
